<template>
  <div class="pb-2 cms-views-container actor-introduct-pages">
    <!-- 演员头像 -->
    <CmsActorAvatar />

    <!-- 演员简介 -->
    <CmsActorDescription
      :type="type"
      :expandType="2"
      showExpand
      @click="handleClick('briefIntroduction')"
      :class="{ 'component-selected': select === 'briefIntroduction' }"
    />

    <div @click="handleClick('participatingWorks')" :class="{ 'component-selected': select === 'participatingWorks' }">
      <CmsActorWorks v-if="type === 1" />

      <CmsScrollGrid :type="1" title="电视剧作品" v-if="type === 2" />
      <CmsScrollGrid :type="1" title="电影作品" />
      <CmsScrollGrid :type="1" title="综艺作品" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'
const { CmsScrollGrid, CmsActorAvatar, CmsActorDescription, CmsActorWorks } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.actor-introduct-pages {
}
</style>
